<template>
  <div style="position: relative; height: 50%; margin-bottom: 15px">
    <span
      class="recognition"
      style="position: absolute; top: 18px; left: 15px; z-index: 999"
    ></span>
    <div id="echartHistogram" class="echarts-style-historgram"></div>
  </div>
</template>

<script>
export default {
  props: ["Histogram"],
  data() {
    return {
      myChart1: null,
      option: {
        title: [
          {
            text: `本年度销售数量`,
            left: 30,
            textStyle: {
              fontWeight: 400,
              lineHeight: 34,
              color: "#FFF",
              fontSize: 16,
            },
          },
        ],
        legend: {
          show: true,
          left: "50%", //组件离容器左侧的距离,'left', 'center', 'right','20%'
          top: "12", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
          textStyle: {
            fontSize: 12,
            color: "#FFFFFF",
          },
        },
        color: ["#2AF2Fc"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月",
            ],
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
                width: 0,
                type: "solid",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",

            axisLabel: {
              //y轴文字的配置
              textStyle: {
                color: "#FFF", //Y轴内容文字颜色
              },
            },
            axisLine: {
              //y轴线的配置
              show: false, //是否展示
              // lineStyle: {
              //     color: "#ECEDF0",//y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
              //     width: 1,//y轴线的宽度
              //     type: "solid"//y轴线为实线
              // },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "年度销售数量",
            type: "bar",
            barWidth: "50%",
            data: [],
          },
        ],
      },
    };
  },

   watch: {
      Histogram: {
        handler(newVal, oldName) {
            let dataList = []
            let xList = []
            let data = [...newVal]
            xList = data.map(item => {
              dataList.push({
                value: item.ct,
                name: item.model
              })
              return item.model.split('-')[1]+'月'
            })
          let valueSetValue=[0,0,0,0,0,0,0,0,0,0,0,0]
          let dataArray=["01","02","03","04","05","06","07","08","09","10","11","12"]
            var dataLet=new Date()
            var year=dataLet.getFullYear()
          for(var i=0;i<dataList.length;i++){
              for (var ii=0;ii<dataArray.length;ii++){
                if(dataList[i]["name"]===year+"-"+dataArray[ii]){
                  valueSetValue[ii]=dataList[i]["value"]
               }
              } 
          }
            this.option.series[0].data = valueSetValue
            this.myChart1 && this.myChart1.setOption(this.option);
        },
        //immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
        immediate: true,
        deep: true // 开启深度监听，默认是false
      },
    },


  mounted() {
    let that = this;
    this.initDeviceEcharts();
    window.addEventListener("resize", () => {
      that.myChart1.resize();
    });
  },
  methods: {
    initDeviceEcharts() {
      var chartDom = document.getElementById("echartHistogram");
      this.myChart1 = this.$echarts.init(chartDom);
      this.myChart1.setOption(this.option);
    }

  },
};
</script>
       
<style>
.echarts-style-historgram {
  width: 100%;
  height: 100%;
  background-color: #072e5f;
  border: 1px solid #072e5f;
  padding: 6px;
  border-radius: 8px;
}
</style>